<nz-popover class="citybox" 
  [nzTitle]="getTitle()" 
  [nzTrigger]="'click'" 
  [nzPlacement]="'bottomLeft'" 
  [nzOverlayClassName]="'city-popover'" 
  [(nzVisible)]="visible"
  (nzVisibleChange)="onVisibleChange($event)">
  <button class="city-title" nz-popover>
    <span>{{currentCity}}</span>
    <i class="anticon anticon-caret-down"></i>
  </button>
  <ng-template #nzTemplate>
    <div class="city-panel">
      <ul class="city-hotlist">
        <li *ngFor="let city of (hotcity$ | async)" (click)="onClickCity(city)">{{city.name}}</li>
      </ul>
      <div class="city-province">
        <div class="province-item" *ngFor="let province of (provinces$ | async)">
          <div class="title">{{province.name}}:</div>
          <ul class="citylist">
            <li *ngFor="let city of province.districts" (click)="onClickCity(city)">{{city.name}}</li>
          </ul>
        </div>
      </div>
    </div>
  </ng-template>
</nz-popover>